<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!-- js部分 -->
    <!-- <ul>

    </ul>
    <button onclick="addHero()">添加英雄</button> -->

    <!-- vue部分 -->
    <div id="app">
        <!-- vue 语法识别区域 -->
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <button @click="addHero">添加英雄</button>
    </div>

</body>

</html>
<script>
    // 01:回顾js 如何渲染数据的过程
    // let arr = ['刘备', '关羽', '张飞'];

    // //01: 获取dom节点
    // let ul = document.querySelector('ul');

    // // 02:定义一个渲染函数
    // render(arr)
    // function render(arr) {
    //     let str = '';
    //     arr.forEach(item => {
    //         str += ` <li>${item}</li>`
    //     })

    //     ul.innerHTML = str

    // }

    // // 03: 添加英雄
    // function addHero() {
    //     console.log('111');
    //     arr.push('赵云')
    //     render(arr)

    // }

    //02: vue 方法
    const { createApp } = Vue;
    const vm = createApp({
        data() { // 01:定义的数据
            return {
                arr: ['刘备', '关羽', '张飞']
            }
        },
        methods: { // 定义方法, 定义的是操作 data 中的数据的所有的方法
            addHero() {
                vm.arr.push('马超')
            }
        }

    }).mount('#app')

    // 03: 对比以上两种语法
    // 描述一下vue 渲染数据的过程
    // 第一步: 首先vue 拿到数据之后, 会根据数据生成虚拟dom 结构 vNode (虚拟dom就是一个描述页面真实dom的对象结构)
    // const vNode = {
    //     tag: 'ul', //标签描述
    //     attrs: {}, // 属性描述
    //     children: [
    //         {
    //             tag: 'li',
    //             attrs: {},
    //             children: '刘备'
    //         },
    //         {
    //             tag: 'li',
    //             attrs: {},
    //             children: '张飞'
    //         },
    //         {
    //             tag: 'li',
    //             attrs: {},
    //             children: '张飞'
    //         }
    //     ]

    // }
    // 第二步: 当数据发生变化后, 生成新的虚拟dom
    // const vNode1 = {
    //     tag: 'ul', //标签描述
    //     attrs: {}, // 属性描述
    //     children: [
    //         {
    //             tag: 'li',
    //             attrs: {},
    //             children: '刘备'
    //         },
    //         {
    //             tag: 'li',
    //             attrs: {},
    //             children: '张飞'
    //         },
    //         {
    //             tag: 'li',
    //             attrs: {},
    //             children: '张飞'
    //         },
    //         {
    //             tag: 'li',
    //             attrs: {},
    //             children: '马超'
    //         }
    //     ]

    // }

    //第三步: 新旧虚拟dom 对比. 发生差异,更新变化部分



</script>